<div class="data_list_container" [style.height]="userDataContainerHeight.toString()+'px'">
  <div>
    <div class="list_item_room" *ngFor="let item of userData trackBy:trackByDataId">
      <div class="left_img">
        <img [ngClass]="setClasses(item)" [src]="getSrc(item)" alt="">
      </div>
      <div class="right_content">
        <div class="item_top">
          <span class="item_name" title="item.fileName">{{item.fileName}}</span>
          <span class="item_time">{{item.createDate | date:'yyyy-MM-dd'}}</span>
        </div>
        <div class="item_middle">
          {{item.type}} <span *ngIf="item.meta!=null && item.meta[0].geometry!=null">: {{item.meta[0].geometry}}</span>
        </div>
        <div class="item_bottom">
          <div class="item_tags">
            <span *ngFor="let itemTags of item.tags">{{itemTags}}</span>
          </div>
          <div class="btn_show" *ngIf="!item.visibleStatus || item.visibleStatus==0 ||item.visibleStatus==2" (click)="addToLayer(item)">
            <img src="assets/images/data/eye.png" alt="" title="add to layer">
          </div>
          <div class="loading" *ngIf="item.visibleStatus==1">
            <img src="assets/images/common/loading2.gif" alt="Loading icon" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <mat-paginator *ngIf="dataLength>12" [length]="dataLength" [pageSize]="pageSize" [pageIndex]='pageIndex'
    (page)="onPageChange($event)">
  </mat-paginator>
</div>